<template>
	<view class="announcement-box">
		<u-navbar :border-bottom="false"  placeholder title-size="36" :custom-back="tui.goBack"></u-navbar>
		
		<view class="tabs-bg">
			<u-tabs :list="categoryList" :bar-style="barStyle" :active-item-style="activeStyle" :gutter="gutter"
				:bold="true" active-color="#292940" inactive-color="#292940" bar-width="24" height="92" font-size="32"
				v-model="current" @change="change"></u-tabs>
		</view>
		<scroll-view style="width: 100%; white-space: nowrap" scroll-x="true" scroll-with-animation v-show="current == 0"
			:scroll-into-view="scrollViewId" >
			<view class="creation-list d-flex align-items-center">
				<view v-for="(item,index) in annouList">
					<view @tap="selective(index)" :id="`id_${index}`" :key="index" :data-current="index"
						@tap.stop="swichNav"
						class="text-343A40 creation-title-list d-flex justify-content-between align-items-center">
						<view :class="{'active':isSelective === index,'mgr-12':index == annouList.length -1}"
							class="creation-name fz-28 ">{{item.name}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<scroll-view style="width: 100%; white-space: nowrap" scroll-x="true" scroll-with-animation v-show="current == 1"
			:scroll-into-view="scrollViewId" >
			<view class="creation-list d-flex align-items-center">
				<view v-for="(item,index) in annouLists">
					<view @tap="selectives(index)" :id="`id_${index}`" :key="index" :data-current="index"
						@tap.stop="swichNavs"
						class="text-343A40 creation-title-list d-flex justify-content-between align-items-center">
						<view :class="{'active':isSelectives === index,'mgr-12':index == annouList.length -1}"
							class="creation-name fz-28 ">{{item.name}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y v-show="current == 0" class="content pt-0 scroll-box" :style="{'--percent':navHeight + 'px'}" @scrolltolower="more">
			<view class="announcement-list card-shadow" @tap="toAnnouncement(item.id)" v-for="item in list">
				<view class="title text-292940 fz-30 font-weight-600">{{item.title}}</view>
				<text class="announcement-title text-999BA8 fz-26">{{item.created_at.substring(0,16).replace(/\-/g,"/")}}</text>
			</view>
			<u-loadmore :status="status" v-show="showLoading" margin-top="50"/>
			<u-empty v-show="total === 0 && !showLoading" color="#b5b5b5" src="/static/home/nodata-icon.png" margin-top="50"></u-empty>
		</scroll-view>
		<scroll-view scroll-y v-show="current == 1" class="content pt-0 scroll-box" :style="{'--percent':navHeight + 'px'}" @scrolltolower="mores">
			<view class="announcement-list card-shadow" @tap="toAnnouncement(item.id)" v-for="item in lists">
				<view class="title text-292940 fz-30 font-weight-600">{{item.title}}</view>
				<text class="announcement-title text-999BA8 fz-26">{{item.created_at.substring(0,16).replace(/\-/g,"/")}}</text>
			</view>
			<u-loadmore :status="statuss" v-show="showLoadings" margin-top="50"/>
			<u-empty v-show="totals === 0 && !showLoadings" color="#b5b5b5" src="/static/home/nodata-icon.png" margin-top="50"></u-empty>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				type: '',
				status: 'loading',
				statuss:'loading',
				showLoading: false,
				total: '',
				list: [],
				page:1,
				categoryList:[
					{name:"公告中心"},{name:"新闻中心"},
					],
				current: 0,
				barStyle: {
					background: 'linear-gradient(141deg, #7A60FF 0%, #1EF7FE 100%)',
					borderRadius: '3px',
				},
				activeStyle: {
					fontWeight: 600,
					fontSize: '36upx',
				},
				gutter: 38,
				scrollViewId: "id_0",
				scrollViewIds: "id_0",
				annouList:[],
				annouLists:[],
				isSelective: 0,
				isSelectives: 0,
				annouCurrent:0,
				annouCurrents:0,
				totals:'',
				pages:1,
				lists:[],
				showLoadings:false,
				navHeight:44
			}
		},
		onLoad() {
			this.getType('post')
			this.getType('new')
			this.navHeight = this.tui.navBarHeight + 44
		},
		methods: {
			getType(type){
				this.$store.dispatch('public/articlesType',{type:type}).then(res=>{
					if(type == 'post'){
						this.annouList = res.data
						this.getArticlesList('',this.annouList[this.isSelective].flag)
					}else{
						if(res.data.length == 0){
							this.annouLists = [{name:'全部新闻',flag:''}]
						}else{
							this.annouLists = res.data
						}
						this.getArticlesLists('',this.annouLists[this.isSelectives].flag)
					}
				})
			},
			//获取文章列表
			getArticlesList(val,type) {
				if(val == 1){
					this.total = ''
					this.page = 1
					this.list = []
				}
				if(!this.showLoading || this.status == 'nomore'){
					this.status = 'loading'
					this.showLoading = true
					this.$store.dispatch('public/articlesList', { page: this.page,type:type}).then(res => {
						this.showLoading = false
						this.total = res.data.total
						this.list = [...this.list, ...res.data.data]
					}).catch(error=>{
						this.showLoading = false
					})
				}
			},
			//获取文章列表
			getArticlesLists(val,type) {
				if(val == 1){
					this.totals = ''
					this.pages = 1
					this.lists = []
				}
				if(!this.showLoadings || this.statuss == 'nomore'){
					this.statuss = 'loading'
					this.showLoadings = true
					this.$store.dispatch('public/articlesList', { page: this.page,type:type}).then(res => {
						this.showLoadings = false
						this.totals = res.data.total
						this.lists = [...this.lists, ...res.data.data]
					}).catch(error=>{
						this.showLoadings = false
					})
				}
			},
			more() {
				if (this.list.length < this.total) {
					this.page++
					this.getArticlesList()
				}else{
					this.showLoading = true
					this.status = 'nomore'
				}
			},
			mores(){
				if (this.lists.length < this.totals) {
					this.pages++
					this.getArticlesLists()
				}else{
					this.showLoadings = true
					this.statuss = 'nomore'
				}
			},
			toAnnouncement(id) {
				uni.navigateTo({
					url: '/pages/secondary/home/announcement-detail?id=' + id
				})
			},
			//切换市场类型
			change(index) {
				this.current = index
				if (this.current > 0) {
					this.gutter = 44
				} else {
					this.gutter = 40
				}
			},
			//选择专辑筛选
			selective(index) {
				if (this.isSelective !== index) {
					this.isSelective = index
					this.getArticlesList(1,this.annouList[this.isSelective].flag)
				}
			},
			//选择专辑筛选
			selectives(index) {
				if (this.isSelectives !== index) {
					this.isSelectives = index
					this.getArticlesLists(1,this.annouLists[this.isSelectives].flag)
				}
			},
			// 点击标题切换当前页时改变样式
			swichNav: function(e) {
				let cur = e.currentTarget.dataset.current;
				if (this.annouCurrent == cur) {
					return false;
				} else {
					this.annouCurrent = cur;
					this.checkCor()
				}
			},
			// 点击标题切换当前页时改变样式
			swichNavs: function(e) {
				let cur = e.currentTarget.dataset.current;
				if (this.annouCurrents == cur) {
					return false;
				} else {
					this.annouCurrents = cur;
					this.checkCors()
				}
			},
			checkCors: function() {
				if (this.annouCurrents > 2) {
					this.scrollViewIds = `id_${this.annouCurrents - 2}`;
				} else {
					this.scrollViewIds = `id_0`;
				}
			},
			checkCor: function() {
				if (this.annouCurrent > 2) {
					this.scrollViewId = `id_${this.annouCurrent - 2}`;
				} else {
					this.scrollViewId = `id_0`;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url('/common/fonts/font-style.css');
	.tabs-bg{
		background: #fff;
	}
	.announcement-box {
		width: 100%;
		min-height: 100vh;
		background: #F8F9FB;
		.content {
			width: 100%;
			padding: 33upx 30upx 10upx;
			box-sizing: border-box;
		
			.announcement-list {
				width: 100%;
				margin-bottom: 20upx;
				height: 149upx;
				padding: 32upx 30upx;
				box-sizing: border-box;
				background: #fff;
				border-bottom: 1upx solid #E9ECEF;
				border-radius: 16upx;
				.announcement-title{
					display: block;
					text-align: right;
				}
				.title{
					margin-bottom: 12upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
			}
			
		}
	}
	.pad-bottom-60{
		padding-bottom: 60upx;
	}
	.recordNo-icon {
		width: 206upx;
		height: 136upx;
		margin: 130upx auto 35upx;
	
		image {
			width: 206upx;
			height: 136upx;
			vertical-align: top;
		}
	}
	.creation-list {
		height: 120upx;
		background: #F8F9FB;
	
		.creation-title-list {
	
			.creation-name {
				width: 162upx !important;
				height: 60upx;
				background: #F0F2F5;
				border-radius: 30upx;
				padding: 0 24upx;
				box-sizing: border-box;
				// margin-right: 24upx;
				margin-left: 24upx;
				text-align: center;
				line-height: 60upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
	
			.active {
				background: #292940;
				color: #ffffff;
			}
	
			.mgr-12 {
				margin-right: 24upx;
			}
		}
	
	}
	/deep/.u-tab-item{
		font-size: 32upx;
	}
	.scroll-box {
		//高度计算 100vh -navbar动态高度  - tabs高度
		height: calc(100vh - var(--percent) - 100upx - 120upx) !important;
	}
</style>
